<template>
    <div class="singer" v-if="details">
        <img class='bjimg' :src="details.artist.cover">
        <i @click="$emit('singer',false)" class="fa fa-chevron-down" aria-hidden="true"></i>
        <ul class="singerUl">
            <li><h3>{{details.artist.name}}</h3></li>
            <li><span>昵称: {{details.artist.name}}</span></li>
            <li><span>关注:{{details.preferShow}}</span> | <span>粉丝:{{details.artist.id|formatNum(1)}}</span></li>
            <li v-if="details.artist.identifyTag">{{details.artist.identifyTag[0]}}
                <span v-if="details.artist.identities">{{details.artist.identities[0]}}</span>
                <span v-if="details.artist.identities">{{details.artist.identities[1]}}</span>
            </li>
        </ul>
        <div class="introduce">
            <h3>歌手简介</h3>
            <p>{{details.artist.briefDesc}}</p>
        </div>
        <!-- <music-item :music="song"></music-item> -->
    </div>
</template>
<script>
// import MusicItem from '@/components/MusicItem.vue'
export default {
  props: {
    singerId: Number
  },
  data() {
    return {
      details: null,
      song:[]
    };
  },
  created() {
    this.axios.get(`/artist/detail?id=${this.singerId}`).then(result => {
      this.details = result.data.data;
    });
    // this.axios.get(`/artist/top/song?id=${this.singerId}`).then(result => {
    //   console.log("歌手单曲", result);
    //   let musicsongs=result.songs.map((v)=>{
    //     return v;
    //   });
    //   // this.songs = musicsongs;
    //   this.song.push(musicsongs);
    //   console.log("歌手单曲==>", this.song);
    // });
    
  },
  components:{
    // MusicItem
  }
};
</script>

<style lang="less" scoped>
.singer {
  width: 100vw;
  height: 100vh;
  z-index: 10;
  left: 0px;
  top: 40px;
  position: fixed;
  background-color: #ffffff;
  &::after {
    content: "";
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    height: 50vh;
    top: 0px;
    left: 0px;
  }
  .bjimg {
    position: absolute;
    width: 100vw;
    height: 50vh;
    left: 0px;
  }
  .fa-chevron-down {
    position: absolute;
    z-index: 20;
    width: 15vw;
    line-height: 10vw;
    text-align: center;
    font-size: 20px;
    color: rgb(255, 255, 255);
  }
  ul {
    position: absolute;
    z-index: 20;
    color: #ffffff;
    top: 165px;
    left: 20px;
    font-size: 15px;
    li {
      &:first-child {
        font-size: 25px;
      }
      &:nth-child(2) {
        font-size: 16px;
        padding: 10px 0px 5px;
      }
      &:nth-child(3) {
        font-size: 16px;
        padding: 0px 0px 10px 0px;
        span {
          &:first-child {
            padding-right: 5px;
          }
          &:nth-child(2) {
            padding-left: 5px;
          }
        }
      }
      &:nth-child(4) {
        span {
          display: inline-block;
          padding: 0px 5px;
          border: 1px solid rgba(255, 255, 255, 0.5);
          color: rgba(255, 255, 255, 0.5);
          font-size: 13px;
          border-radius: 5px;
          text-align: center;
          &:nth-child(2) {
            margin-left: 7px;
          }
        }
      }
    }
  }
  .introduce {
    position: absolute;
    top: 52vh;
    height: 48vh;
    overflow: hidden;
    h3 {
      padding: 0px 0px 10px 10px;
      color: #000;
      font-weight: bold;
      font-size: 18px;
    }
    p {
      height: 36vh;
      line-height: 22px;
      padding: 0px 10px 0px 10px;
      text-align: center;
      overflow: auto;
      color: rgba(0, 0, 0, 0.8)
    }
  }
}
</style>

